<template>
  <div class="header-swiper">
    <swiper :options="swiperOption">
      <!-- slides -->
      <swiper-slide v-for="(item, index) in swiperList" :key=item.id>
        <img :src=item.imgUrl alt="">
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>

    </swiper>
  </div>
</template>
<script>
export default {
  data() {
    return {
      swiperList:[
        {
          id:"01",
          imgUrl:require("@/assets/img/swiper1.jpg"),
        },
        {
          id:"02",
          imgUrl:require("@/assets/img/swiper2.jpg"),
        },
        {
          id:"03",
          imgUrl:require("@/assets/img/swiper3.jpg"),
        }
      ],
      swiperOption:{
        pagination: {
          el: '.swiper-pagination',

        },
        loop:true
      }
    }
  },
}
</script>


<style type="text/css" scoped lang="stylus">
.header-swiper{
  background #ccc
  // padding-bottom 100%
  height 100px
}
.header-swiper img{
  width 100%
  height 100%
}
.header-swiper >>> .swiper-pagination-bullet-active{
  background #fff
}
</style>
